import { FC, MouseEvent } from "react";

// import QuestionInput from "@/components/QuestionComponents/QuestionInput/Component";
// import QuestionTitle from "@/components/QuestionComponents/QuestionTitle/Component";
import { Spin } from "antd";

import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import { getComponentConfByType } from "@/components/QuestionComponents";
import {
  ComponentInfoType,
  changeSelectId,
  moveComponent,
} from "@/store/componentReducer";
import { useDispatch } from "react-redux";
import { cn } from "@/utils/core-uitls";
import useBindCanvasKeyPress from "@/hooks/useBindCanvasKeyPress";
import SortableContainer from "@/components/DragSortable/SortableContainer";
import SortableItem from "@/components/DragSortable/SortableItem";
type PropsType = {
  loading: boolean;
};

//组件
const EditCanvas: FC<PropsType> = ({ loading }) => {
  const { componentList, selectId } = useGetComponentInfo();
  const dispatch = useDispatch();
  //绑定键盘事件
  useBindCanvasKeyPress();
  function handleClick(event: MouseEvent, id: string) {
    event.stopPropagation();
    dispatch(changeSelectId(id));
  }

  if (loading) {
    return (
      <div className=" flex justify-center mt-6">
        <Spin />
      </div>
    );
  }

  //获取组件函数
  function getComponent(componentInfo: ComponentInfoType) {
    const { type, props } = componentInfo;
    const componentConf = getComponentConfByType(type);
    if (componentConf == null) return null;
    const { Component } = componentConf;

    return <Component {...props} />;
  }

  function handleDragEnd(oldIndex: number, newIndex: number) {
    dispatch(moveComponent({ oldIndex, newIndex }));
  }
  //转格式
  const items = componentList.map((c) => ({ id: c.fe_id, ...c }));
  return (
    <SortableContainer items={items} handleDragEnd={handleDragEnd}>
      <div className="min-h-full bg-white overflow-hidden">
        {componentList
          .filter((c) => !c.isHidden)
          .map((c) => {
            const { fe_id } = c;
            //获取组件

            return (
              <SortableItem id={fe_id} key={fe_id}>
                <div
                  className={cn(
                    "m-3 border-1 border-white p-3 rounded-md  hover:border-[#d9d9d9]",
                    fe_id === selectId ? "!border-[#1890ff]" : "",
                    c.isLocked ? "opacity-30 cursor-not-allowed" : ""
                  )}
                  onClick={(event) => handleClick(event, fe_id)}
                >
                  <div className="pointer-events-none">{getComponent(c)}</div>
                </div>
              </SortableItem>
            );
          })}
        {/* <div className="m-3 border-1 border-white p-3 rounded-md  	 hover:border-[#d9d9d9]">
        <div className="pointer-events-none">
    
          <QuestionInput   />
        </div>
      </div>
      <div className="m-3 border-1 border-white p-3 rounded-md  	 hover:border-[#d9d9d9]">
        <QuestionTitle />
      </div> */}
      </div>
    </SortableContainer>
  );
};

export default EditCanvas;
